<template>
  <div class="container">
    <div class="context">
      <h1>更新密码</h1>
      <div class="input-group">
        <el-input
          v-model="username"
          style="width: 200px; height: 25px"
          placeholder="请输入用户名"
          clearable
        />
      </div>
      <div class="input-group">
        <el-input
          v-model="password"
          style="width: 200px; height: 25px"
          type="password"
          placeholder="旧密码"
          show-password
        />
      </div>
      <div class="input-group">
        <el-input
          v-model="npassword"
          style="width: 200px; height: 25px"
          type="password"
          placeholder="新密码"
          show-password
        />
      </div>
      <div class="btn-group">
        <el-button type="info" plain @click="toggleUpdate" style="width: 80px">取消</el-button>
        <el-button type="success" plain @click="update(npassword)" style="width: 80px"
          >保存</el-button
        >
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { toggleUpdate, update } from '@/hook/user-api/userState.js'
const data = localStorage.getItem('data')
const user = JSON.parse(data)
const username = ref(user.username)
const password = ref(user.password)
const npassword = ref('')
</script>

<style lang="scss" scoped>
.container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  padding-left: 2rem;
  padding-right: 2rem;
  display: flex;
  justify-content: center;
  --tw-text-opacity: 1;
  --tw-bg-opacity: 0.3;
  color: rgb(0 0 0 / var(--tw-text-opacity));
  background-color: rgb(0 0 0 / var(--tw-bg-opacity));
  z-index: 20;
  .context {
    align-self: flex-start;
    max-width: 768px;
    padding: 1rem;
    margin-top: 8rem;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity));
    .btn-group {
      display: flex;
      justify-content: space-between;
      margin-top: 1rem;
      button {
        font-size: 0.75rem;
        line-height: 1rem;
      }
    }
    .input-group {
      margin-top: 1rem;
    }
  }
}
</style>
